<template>
  <div class="app-container">
    <div class="project-list-view">
      <el-table :data="tableData3"
                border
                style="width: 100%"
                :row-key="tableData3.id">
        <el-table-column prop="id"
                         label="ID"
                         width="100">
        </el-table-column>
        <el-table-column prop="username"
                         label="发布者"
                         width="100">
        </el-table-column>
        <el-table-column prop="title"
                         label="交流贴标题">
        </el-table-column>

        <el-table-column prop="biography"
                         label="交流贴简介">
        </el-table-column>
        <el-table-column prop="tag"
                         label="标签"
                         width="100">
        </el-table-column>
        <el-table-column prop="datatime"
                         label="发布时间"
                         width="100">
        </el-table-column>
        <el-table-column prop="delete"
                         label="删除"
                         width="80">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.$index)"
                       type="danger"
                       plain
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getProjectList,
  updateProjectSelected,
  updateProjectHot,
  delProject,
} from '@/api/projectList'
export default {
  name: 'CommunicationList',
  computed: {},
  data() {
    return {
      tableData3: [],
      projectSelected: '0',
      projectHot: '0',
    }
  },
  methods: {
    // 获取项目信息
    getProjectInfo: function () {
      this.tableData3 = [
        {
          id: 1,
          title: '为什么说 Nest.js 提供了 Express 没有的架构能力？',
          username: '神说要有光',
          datatime: '2023-2-9 13:28:46',
          biography:
            'Nest.js 是当前最流行的 Node.js 框架，现在已经 56k star 了',
          tag: '后端',
        },
        {
          id: 2,
          title: 'vue的几个提效技巧',
          username: '我在纽约写程序',
          datatime: '2023-2-10 12:30:40',
          biography: `1.动态组件 <component :is='组件名'></component> 结合v-for循环使用`,
          tag: '前端',
        },
        {
          id: 3,
          title: 'ElasticSearch数据存储与搜索基本原理',
          username: 'chenyuxi',
          datatime: '2023-2-11 01:18:56',
          biography: `为啥想学习es，主要是在工作中会用到，但是因为不了解原理，所以用起来畏手畏脚的，就想了解下es是怎...`,
          tag: '后端',
        },
        {
          id: 4,
          title:
            '开发中使用iconfont太麻烦了，于是我写了这款vscode插件，支持react和vue。',
          username: '前端小付',
          datatime: '2023-2-14 20:20:30',
          biography: `开发中使用iconfont太麻烦了，于是我写了这款vscode插件，支持react和vue。本文主要写了插件的使用...`,
          tag: '后端',
        },
      ]
    },
    // 删除项目
    handleDelete: function (index) {
      console.log('删除')
      this.tableData3.splice(index, 1)
      // this.tableData3.length =
      this.$message({
        showClose: true,
        message: '标签删除成功',
        type: 'success',
      })
    },
    // 项目精选开关
    handleChangeSelected: function (projectId) {
      updateProjectSelected({
        pro_id: projectId,
        selected: this.projectSelected,
      }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getProjectInfo()
        } else {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'warning',
          })
        }
      })
    },
    // 项目热门开关
    handleChangeHot: function (projectId) {
      updateProjectHot({
        pro_id: projectId,
        hot: this.projectHot,
      }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getProjectInfo()
        } else {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'warning',
          })
        }
      })
    },
  },
  beforeMount() {
    this.getProjectInfo()
  },
}
</script>

<style lang="scss"></style>